<template>
    <div>
        <h2>订单管理</h2>
        <el-divider></el-divider>
        <el-tabs v-model="activeName">
            <el-tab-pane label="全部" name="first">
                <el-card>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="订单搜索">
                            <el-input v-model="formInline.orderNumber" placeholder="订单号" style="width: 220px" suffix-icon="el-icon-search"></el-input>
                        </el-form-item>
                        <el-form-item label="商品名称">
                            <el-input v-model="formInline.name" placeholder="搜索商品名称" style="width: 220px" suffix-icon="el-icon-search"></el-input>
                        </el-form-item>
                        <el-form-item label="负责人" prop="userName">
                            <el-cascader :options="options" :show-all-levels="false" style="width: 220px" prefix-icon="el-icon-search"></el-cascader>
                        </el-form-item>
                        <el-form-item label="下单时间">
                            <el-date-picker
                                    style="width: 220px"
                                    v-model="formInline.time"
                                    type="daterange"
                                    range-separator="~"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间">
                            </el-date-picker>
                        </el-form-item><br>
                        <el-form-item label="店铺搜索">
                            <el-select v-model="formInline.shop" placeholder="全部" style="width: 220px">
                                <el-option label="淘宝" value="shanghai"></el-option>
                                <el-option label="众哲鑫商城" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="下单类型">
                            <el-select v-model="formInline.type" placeholder="全部" style="width: 220px">
                                <el-option label="淘宝" value="shanghai"></el-option>
                                <el-option label="众哲鑫商城" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-card>
                <div class="commodity"></div>
                <el-card>
                    <el-row>
                        <el-col :span="22">
                            <el-tabs v-model="activetable">
                                <el-tab-pane label="全部" name="first"></el-tab-pane>
                                <el-tab-pane label="待支付" name="second"></el-tab-pane>
                                <el-tab-pane label="已支付" name="third"></el-tab-pane>
                                <el-tab-pane label="已发货" name="fourth"></el-tab-pane>
                                <el-tab-pane label="售后中" name="fifth"></el-tab-pane>
                                <el-tab-pane label="已关闭" name="sixth"></el-tab-pane>
                                <el-tab-pane label="已取消" name="seventh"></el-tab-pane>
                            </el-tabs>
                        </el-col>
                        <el-col :span="2">
                            <el-button type="primary" style="width: 120px">导出</el-button>
                        </el-col>
                    </el-row>

                    <el-table
                            :data="tableData"
                            style="width: 100%">
                        <el-table-column
                                prop="name"
                                label="商品">
                        </el-table-column>
                        <el-table-column
                                prop="price"
                                label="单价*数量">
                        </el-table-column>
                        <el-table-column
                                prop="total"
                                label="总金额">
                        </el-table-column>
                        <el-table-column
                                prop="customer"
                                label="客户">
                        </el-table-column>
                        <el-table-column
                                prop="type"
                                label="订单类型">
                        </el-table-column>
                        <el-table-column
                                prop="cheap"
                                label="优惠金额">
                        </el-table-column>
                        <el-table-column
                                prop="receipts"
                                label="实际收款">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="订单状态">
                        </el-table-column>
                        <el-table-column
                                prop="remarks"
                                label="备注">
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-dropdown trigger="click">
                                    <span class="el-dropdown-link">
                                        更多
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-button type="text" @click="viewAll = true">详情</el-button><br>
                                        <el-button type="text" @click="editAll = true">编辑</el-button><br>
                                        <el-button type="text" @click="remove">删除</el-button>
                                    </el-dropdown-menu>

                                </el-dropdown>
                                <el-button type="text" @click="out = true">发货</el-button>
                            </template>

                        </el-table-column>
                    </el-table>

                </el-card>
                <!--详情-->
                <el-dialog title="订单详情" :visible.sync="viewAll" width="30%" :close-on-click-modal="false">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="商品">
                            <el-input v-model="form.name" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="单价*数量">
                            <el-input v-model="form.price" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="总金额">
                            <el-input v-model="form.total" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="客户">
                            <el-input v-model="form.customer" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="订单类型">
                            <el-select v-model="form.type" placeholder="请选择活动区域" :disabled="true" style="width: 220px">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="优惠金额">
                            <el-input v-model="form.cheap" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="实际收款">
                            <el-input v-model="form.receipts" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="订单状态">
                            <el-input v-model="form.status" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form.remarks" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="close">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <!--编辑-->
                <el-dialog title="订单编辑" :visible.sync="editAll" width="30%" :close-on-click-modal="false">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="商品">
                            <el-input v-model="form.name" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="单价*数量">
                            <el-input v-model="form.price" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="总金额">
                            <el-input v-model="form.total" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="客户">
                            <el-input v-model="form.customer" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="订单类型">
                            <el-select v-model="form.type" placeholder="请选择订单类型" style="width: 220px">
                                <el-option label="已支付" value="shanghai"></el-option>
                                <el-option label="未支付" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="优惠金额">
                            <el-input v-model="form.cheap" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="实际收款">
                            <el-input v-model="form.receipts" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="订单状态">
                            <el-input v-model="form.status" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form.remarks" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="updateAll" type="primary">保存</el-button>
                            <el-button @click="close">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <!--发货-->
                <el-dialog title="发货" :visible.sync="out" width="30%" :close-on-click-modal="false">
                    <el-form ref="form" :model="information" label-width="80px">
                        <el-form-item label="收货人姓名">
                            <el-input v-model="information.customerName" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="收货人手机号">
                            <el-input v-model="information.telephone" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="收货地址">
                            <el-input v-model="information.address" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="物流单号">
                            <el-input v-model="information.number" placeholder="请输入物流单号"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="consignment">发货</el-button>
                            <el-button @click="close">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="众哲鑫商城" name="second">
                <el-card>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="订单搜索">
                            <el-input v-model="formInline.orderNumber" placeholder="订单号" style="width: 220px" suffix-icon="el-icon-search"></el-input>
                        </el-form-item>
                        <el-form-item label="商品名称">
                            <el-input v-model="formInline.name" placeholder="搜索商品名称" style="width: 220px" suffix-icon="el-icon-search"></el-input>
                        </el-form-item>
                        <el-form-item label="负责人" prop="userName">
                            <el-cascader :options="options" :show-all-levels="false" style="width: 220px" prefix-icon="el-icon-search"></el-cascader>
                        </el-form-item>
                        <el-form-item label="下单时间">
                            <el-date-picker
                                    style="width: 220px"
                                    v-model="formInline.time"
                                    type="daterange"
                                    range-separator="~"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间">
                            </el-date-picker>
                        </el-form-item><br>
                        <el-form-item label="下单类型">
                            <el-select v-model="formInline.type" placeholder="全部" style="width: 220px">
                                <el-option label="淘宝" value="shanghai"></el-option>
                                <el-option label="众哲鑫商城" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-card>
                <div class="commodity"></div>
                <el-card>
                    <el-row>
                        <el-col :span="20">
                            <el-tabs v-model="activetables">
                                <el-tab-pane label="全部" name="first"></el-tab-pane>
                                <el-tab-pane label="待支付" name="second"></el-tab-pane>
                                <el-tab-pane label="已支付" name="third"></el-tab-pane>
                                <el-tab-pane label="已发货" name="fourth"></el-tab-pane>
                                <el-tab-pane label="售后中" name="fifth"></el-tab-pane>
                                <el-tab-pane label="已关闭" name="sixth"></el-tab-pane>
                                <el-tab-pane label="已取消" name="seventh"></el-tab-pane>
                            </el-tabs>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="primary" style="width: 120px" @click="logistics = true">导入物流单号</el-button>
                            <el-button type="primary" style="width: 120px">导出</el-button>
                        </el-col>
                    </el-row>

                    <el-table
                            :data="tableData"
                            style="width: 100%">
                        <el-table-column
                                prop="name"
                                label="商品">
                        </el-table-column>
                        <el-table-column
                                prop="price"
                                label="单价*数量">
                        </el-table-column>
                        <el-table-column
                                prop="total"
                                label="总金额">
                        </el-table-column>
                        <el-table-column
                                prop="customer"
                                label="客户">
                        </el-table-column>
                        <el-table-column
                                prop="type"
                                label="订单类型">
                        </el-table-column>
                        <el-table-column
                                prop="cheap"
                                label="优惠金额">
                        </el-table-column>
                        <el-table-column
                                prop="receipts"
                                label="实际收款">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="订单状态">
                        </el-table-column>
                        <el-table-column
                                prop="remarks"
                                label="备注">
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <el-button type="text" @click="outs = true">发货</el-button>
                            <el-button type="text" @click="view = true">详情</el-button>
                            <el-button type="text" @click="edit = true">编辑</el-button>
                            <el-button type="text" @click="remove">删除</el-button>
                        </el-table-column>
                    </el-table>

                </el-card>
                <!--详情-->
                <el-dialog title="订单详情" :visible.sync="view" width="30%" :close-on-click-modal="false">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="商品">
                            <el-input v-model="form.name" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="单价*数量">
                            <el-input v-model="form.price" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="总金额">
                            <el-input v-model="form.total" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="客户">
                            <el-input v-model="form.customer" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="订单类型">
                            <el-select v-model="form.type" placeholder="请选择活动区域" :disabled="true" style="width: 220px">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="优惠金额">
                            <el-input v-model="form.cheap" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="实际收款">
                            <el-input v-model="form.receipts" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="订单状态">
                            <el-input v-model="form.status" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form.remarks" :disabled="true" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="close">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <!--编辑-->
                <el-dialog title="订单编辑" :visible.sync="edit" width="30%" :close-on-click-modal="false">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="商品">
                            <el-input v-model="form.name" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="单价*数量">
                            <el-input v-model="form.price" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="总金额">
                            <el-input v-model="form.total" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="客户">
                            <el-input v-model="form.customer" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="订单类型">
                            <el-select v-model="form.type" placeholder="请选择订单类型" style="width: 220px">
                                <el-option label="已支付" value="shanghai"></el-option>
                                <el-option label="未支付" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="优惠金额">
                            <el-input v-model="form.cheap" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="实际收款">
                            <el-input v-model="form.receipts" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="订单状态">
                            <el-input v-model="form.status" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form.remarks" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="updateAll" type="primary">保存</el-button>
                            <el-button @click="close">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <!--导入物流单号-->
                <el-dialog title="导入物流单号" :visible.sync="logistics" width="35%" :close-on-click-modal="false">
                    <p>1.文件大小限制在5M以内</p>
                    <p>2.上传的对话完成后，对话内容不会立即添加到列表中，上传的文件越大，需要的时间越长</p>
                    <p>3.导入的物流单号、订单编号不能为空</p>
                    <p>4.点击下载&nbsp;&nbsp;<a href="#">物流单号模板</a></p>
                    <el-upload
                            class="upload-demo"
                            drag
                            action="https://jsonplaceholder.typicode.com/posts/"
                            multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                    <div>
                        <el-button @click="close">取消</el-button>
                        <el-button @click="submit" type="primary">确定</el-button>
                    </div>
                </el-dialog>
                <!--发货-->
                <el-dialog title="发货" :visible.sync="outs" width="30%" :close-on-click-modal="false">
                    <el-form ref="form" :model="zzx" label-width="80px">
                        <el-form-item label="收货人姓名">
                            <el-input v-model="zzx.customerName" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="收货人手机号">
                            <el-input v-model="zzx.telephone" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="收货地址">
                            <el-input v-model="zzx.address" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="物流单号">
                            <el-input v-model="zzx.number" placeholder="请输入物流单号"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="consignments">发货</el-button>
                            <el-button @click="close">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    name: "order",
    data() {
        return {
            viewAll: false,
            editAll: false,
            view: false,
            edit: false,
            logistics: false,
            out: false,
            outs: false,
            activeName: 'first',
            activetable: 'first',
            activetables: 'first',
            formInline: {
                orderNumber: '',
                name: '',
                userName: '',
                shop: '',
                type: '',
            },
            form: {
                name: '微信支付黑色笔记本',
                price: '500/1',
                total: '500',
                customer: '赵晓黑',
                type: '已支付',
                cheap: '50',
                receipts: '500',
                status: '已支付',
                remarks: '尽快发货'
            },
            tableData: [{
                    name: '微信支付黑色笔记本',
                    price: '500/1',
                    total: '500',
                    customer: '赵晓黑',
                    type: '已支付',
                    cheap: '50',
                    receipts: '500',
                    status: '已付款',
                    remarks: '尽快发货'
            }],
            information: {
                customerName: '张三',
              telephone: '15745116874',
              address: '山东省济南市高新区顺泰广场',
              number: ''
            },
            zzx: {
                customerName: '张三',
                telephone: '15745116874',
                address: '山东省济南市高新区顺泰广场',
                number: ''
            },


            options: [{
                value: 'jishubu',
                label: '技术部',
                children: [{
                    value: 'shejiyuanze',
                    label: '潘石屹',
                }, {
                    value: 'daohang',
                    label: '王石',
                }]
            }, {
                value: 'shichangbu',
                label: '市场部',
                children: [{
                    value: 'basic',
                    label: '蒋锡培',
                }, {
                    value: 'form',
                    label: '向文波',
                }, {
                    value: 'data',
                    label: '牛根生',
                }, {
                    value: 'notice',
                    label: '熊晓鸽',
                }, {
                    value: 'navigation',
                    label: '王冉',
                }, {
                    value: 'others',
                    label: '于清教',
                }]
            }, {
                value: 'ziyuan',
                label: '客服部',
                children: [{
                    value: 'axure',
                    label: '谢清海'
                }, {
                    value: 'sketch',
                    label: '刘旗辉'
                }, {
                    value: 'jiaohu',
                    label: '陈达夫'
                }]
            }],

        }
    },
    methods: {
        close() {
            this.viewAll = false
            this.editAll = false
            this.view = false
            this.edit = false
            this.logistics = false
            this.out = false
            this.outs = false
        },
        updateAll() {
            this.$message({
                message: '保存成功',
                type: 'success'
            })
            this.close()
        },
        remove() {
            this.$confirm('确定要删除吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        submit() {
            this.$message({
                message: '上传成功',
                type: 'success'
            })
            this.close()
        },
        consignment() {
            this.$message({
                message: '成功发货',
                type: 'success'
            })
            this.out = false
        },
        consignments() {
            this.$message({
                message: '成功发货',
                type: 'success'
            })
            this.outs = false
        }
    }
}
</script>

<style scoped>
.commodity {
    height: 20px;
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}
</style>